<html>
<head>
    <script>
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-28095206-1']);
        _gaq.push(['_trackPageview']);

        (function () {
            var ga = document.createElement('script');
            ga.type = 'text/javascript';
            ga.async = true;
            ga.src = 'https://ssl.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();
    </script>
</head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="css/options/default.css" media="screen">
<link rel="stylesheet" href="css/options/main.css" media="screen">
<link rel="stylesheet" href="css/options/setting.css" media="screen">
<link rel="stylesheet" href="css/options/custom.css" media="screen">
<body>

<div id="sidebar" class="fancy">
    <img id="icon" src="" alt="">

    <h1 style="display: none;">Options</h1>

    <div id="tab-container">
        <div class="tab active" i18n="editUaList">
        </div>
    </div>
</div>

<div id="content">
    <div class="tab-content show">
        <h2 i18n="editUaList"></h2>
        <br/>

        <div class="setting group-name" i18n="uaList">
        </div>
        <div class="setting group">
            <div>
                <table style="width:100%;">
                    <tr>
                        <td i18n="uaName" class="rowLabel"></td>
                        <td i18n="uaValue" class="rowLabel"></td>
                        <td class="rowLabel" style="text-align: right">Actions</td>
                    </tr>
                </table>
            </div>
            <div>
                <table id="ualist" style="width:100%;">

                </table>
            </div>
        </div>
        <div class="setting group-name" i18n="uaFormTitle">
        </div>
        <div id="uaedition">
            <form id="uaform">
                <label for="uaname" i18n="uaName"></label>
                <input type="text" name="uaname" id="uaname" class="inputUaname" required/><br>
                <label for="uastring" i18n="uaValue"></label>
                <input type="text" name="uastring" id="uastring" required><br/>
                <label for="uadescription">Description</label>
                <input type="text" name="uadescription" id="uadescription"/><br/>
                <input type="hidden" name="uaid" id="uaid" value=""/>
                <input type="hidden" name="uamode" id="uamode" value="create"/>
                <input type="submit"/>
                <input type="submit" id="resetForm" value="Clear"/>
            </form>
        </div>
        <div id="optionsMessage">

        </div>
        <br/>

        <div class="setting group-name" i18n="exportTitle">
        </div>
        <div class="setting group">
            <a id="exportUserAgents" href="#" i18n="exportLabel"></a>

            <div id="downloadLink">
            </div>
        </div>

        <br/>

        <div class="setting group-name" i18n="importTitle">
        </div>
        <div class="setting group" i18n="importLabel">
        </div>
        <input type="file" id="files" name="files[]" multiple/>
        <output id="list"></output>
        <script type="text/javascript">
            function handleFileSelect(evt) {
                var files = evt.target.files; // FileList object
                // Loop through the FileList and render image files as thumbnails.
                for (var i = 0, f; f = files[i]; i++) {
                    // Only process image files.
                    //if (!f.type.match('text.*')) {
                    //  continue;
                    //}

                    var reader = new FileReader();
                    // Closure to capture the file information.
                    reader.onload = (function (theFile) {
                        return function (e) {
                            var res = e.target.result.replace("data:text/plain;base64,", "");
                            var useragents = window.atob(res);
                            chrome.extension.getBackgroundPage().importUserAgents(useragents);
                        };
                    })(f);

                    // Read in the image file as a data URL.
                    reader.readAsDataURL(f);
                }
            }

            document.getElementById('files').addEventListener('change', handleFileSelect, false);
        </script>


    </div>


</div>


<span></span>
</body>
<script type="text/javascript">

    var BG = chrome.extension.getBackgroundPage();

    // i18n
    function localizePage() {
        $("[i18n]:not(.i18n-replaced)").each(function () {
            $(this).html(translate($(this).attr("i18n")));
        });
    }

    function translate(messageID, args) {
        return chrome.i18n.getMessage(messageID, args);
    }

    // utils
    var fireEvent = function (name, data) {
        var e = document.createEvent("Event");
        e.initEvent(name, true, true);
        e.data = data;
        window.dispatchEvent(e);
    };

    $(document).ready(function () {
        fireEvent("refreshualist");
        localizePage();

        // Click listeners
        $('#resetForm').click(function() {
            fireEvent('resetform');
            return false;
        });
        $('#exportUserAgents').click(function() {
            exportUserAgents();
        });
        $('.deleteConfirm').click(function(e) {
            var uaid = $(e.currentTarget).data('uaid');
            deleteConfirm(uaid);
        })
        $('.editUa').click(function(e) {
            var uaid = $(e.currentTarget).data('uaid');
            editUa(uaid);
        })
    });

    // begin
    var ualist = "";

    window.addEventListener("refreshualist", function () {
        ualist = "";
        BG.loadUserAgents(renderUaEditLine, displayEditableUserAgents);
    });

    window.addEventListener("resetform", function () {
        $("#uaform :input[type='text']").val("");
        $("#uaform #uamode").val("create");
    });

    // main listing
    function displayEditableUserAgents() {
        $("#ualist").html(ualist);
    }

    function deleteConfirm(key) {
        var question = chrome.i18n.getMessage("uaConfirmDelete", key);
        var r = confirm(question);
        if (r) {
            deleteUa(key);
            return false;
        }
        return false;
    }

    // exporter
    var uaExport = new Array();

    function jsonBuilder(row) {
        uaExport.push(row.value);
    }

    function uaExporter() {
        var jex = JSON.stringify(uaExport).replace(new RegExp(' ', 'g'), "%20");
        var dlink = document.createElement("a");
        dlink.textContent = chrome.i18n.getMessage("exportDownloadReady");
        // todo add date
        dlink.download = "chromeuseragentselector-export.txt";
        dlink.href = "data:application/json," + jex;
        $("#downloadLink").html(dlink);
    }

    function exportUserAgents() {
        BG.loadUserAgents(jsonBuilder, uaExporter);
    }

    // edit form
    var uadelete = chrome.i18n.getMessage("uaDelete");
    var uaedit = chrome.i18n.getMessage("uaEdit");
    function renderUaEditLine(row) {
        var uastring = row.value.string;
        if (uastring != navigator.userAgent) {
            var ua = '\'' + row.value.string + '\'';
            var uaid = '\'' + row.key + '\'';
            var name = row.value.name;
            var line = '<tr><td width="120px;">' + name + '</td><td>' + uastring + '</td><td><a class="deleteConfirm" data-uaid="'+uaid+'" href="#">' + uadelete + '</a></td>' +
                    '<td><a class="editUa" data-uaid="'+uaid+'" href="#">' + uaedit + '</a></td></tr>';
            ualist += line;
        }
    }

    // edition
    function fillForm(useragent) {
        BG.log("filling out edit form");
        var loaded = useragent;
        $("#uaform #uamode").val("update");
        $("#uaform #uaid").val(loaded.name);
        $("#uaform #uaname").val(loaded.name);
        $("#uaform #uastring").val(loaded.string);
        $("#uaform #uadescription").val(loaded.description);
    }


    function editUa(key) {
        //BG.log("editUa");
        BG.loadUserAgent(key, fillForm);
        return false;
    }

    function deleteUa(key) {
        //BG.log("deleteUa");
        BG.deleteUserAgent(key, deleteSuccess);
        return false;
    }

    function createSuccess() {
        //BG.log("create successfull");
        fireEvent("resetform");
    }

    function updateSuccess() {
        //BG.log("update successfull");
        fireEvent("resetform");
    }

    function deleteSuccess() {
        //BG.log("delete successfull");
        fireEvent("refreshualist");
    }

    // submit
    $("#uaform").submit(function () {
        var uaname = $("#uaname").val();
        var uastring = $("#uastring").val();
        var uadescription = $("#uadescription").val();
        var key = $("#uaid").val();
        var mode = $("#uamode").val();
        var useragent = {"name":uaname, "string":uastring, "description":uadescription};
        if (mode == 'create') {
            BG.addUserAgent(useragent, createSuccess);
        } else if (mode == 'update') {
            BG.updateUserAgent(key, useragent, updateSuccess);
        }
        fireEvent("refreshualist");
        return false;
    })
</script>
</html>